<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{ padding: 0; margin: 0; list-style-type: none;}
    body{ position: relative; width: 100vw; height: 100vh;}
    .cont{ width: 100px; height: 100px; background: red; border-radius: 50%; position: absolute; left: 0; top: 0;
        animation: yundong 5.6s infinite linear alternate,yundong1 8.6s infinite linear alternate;}
    @keyframes yundong {
        from{
            left: calc(100% - 100px);
        }
    }
    @keyframes yundong1 {
        from{
            top: calc(100% - 100px);
        }
    }
    .cont:hover{
        animation-play-state: paused;
    }
</style>
<body>
    <div class="cont"></div>
    <script>
        let cont = document.querySelector('.cont');
        cont.addEventListener('dblclick',function(event){
              document.body.removeChild(event.target);
        })
    </script>
</body>
</html>